<template>
	<view class="">
		<navbar title="视频课程" />
		<video :src="info.videoUrlStr" controls></video>
		<view class="info">
			<image src="@/static/arrow-right.png" mode=""></image>
			<view class="title">
				{{info.name}}
			</view>
			<view class="text">
				共{{periodNumber}}课时
			</view>
		</view>
		<view class="list">
			<view class="col" v-for="period,index in list" :key="period.id">
				<view :class="periodId === period.id ? `item active` : `item`" @click="choosePeriod(period)">
					{{period.name}}
				</view>
			</view>
		</view>
		<QA :list="questions_list" :periodId="periodId" :teachar="info.teachar" :teacharAvatar="info.teacharAvatarUrl" />
	</view>
</template>

<script>
	import QA from "../course/quality/components/QA.vue"
	export default {
		components: {
			QA
		},
		data() {
			return {
				active: 0,
				info:{},
				list:[],
				questions_list:[],
				periodNumber:0,
				periodId:'',
				chapterId:'',
			}
		},
		onLoad(option) {
			this.periodId = option.periodId
			this.chapterId = option.chapterId
			this.getPeriodList(this.chapterId)
			this.getQuestions(this.chapterId)
		},
		methods: {
			videoErrorCallback: (e) => {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			// getDetail(periodId) {
			// 	this.$post("/course/period_detail", {
			// 		periodId
			// 	}).then(res => {
			// 		this.info = res.data
			// 		this.chapterId = res.data.chapterId
			// 	})
			// },
			getPeriodList(chapterId) {
				this.$post("/course/period_list", {
					chapterId
				}).then(res => {
					this.list = res.data
					this.periodNumber = this.list.length
					this.list.forEach((item,index)=>{
						if(item.id === this.periodId)
						{
							this.info = item
						}
					})
				})
			},
			getQuestions(chapterId){
				this.$post("/course/questions_list", {
					chapterId
				}).then(res => {
					this.questions_list = res.data
				})
			},
			choosePeriod(period){
				if(period.id !== this.periodId)
				{
					this.info = period
					this.periodId = period.id
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	video {
		width: 100%;
	}

	.list {
		display: flex;
		overflow-x: auto;
		padding: 0 30rpx;

		.col {
			padding: 0 6rpx;
			position: relative;

			image {
				width: 34rpx;
				height: 34rpx;
				margin-left: 100%;
				margin-top: 10rpx;
				transform: translateX(-150%);
			}

			.item {
				width: 280rpx;
				height: 200rpx;
				border-radius: 8rpx;
				background-color: #EFFFF2;
				padding: 20rpx;
				font-size: 28rpx;
			}

			.active {
				border: 2rpx solid $assist-color2;
				color: $assist-color2;
				background-color: #fff;
			}
		}
	}

	.info {
		box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.05);
		padding: 30rpx 40rpx;
		padding-right: 80rpx;
		margin: 70rpx 0;
		position: relative;

		image {
			width: 32rpx;
			height: 32rpx;
			position: absolute;
			right: 40rpx;
			top: 50%;
			transform: translateY(-50%);
		}

		.title {
			font-weight: bold;
		}

		.text {
			font-size: 24rpx;
			color: #999;
			margin-top: 10rpx;
		}
	}
</style>